
import React, { useState, useEffect, useCallback } from 'react';
import { Home, FileText, HardDrive, User, ChevronRight } from 'lucide-react';
import MenuToggle from '../components/MenuToggle';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { userApi } from '@/services/api';
import { useNavigate } from 'react-router-dom';

const Index = ({ toggleSidebar }) => {
  const navigate = useNavigate();
  const [userInfo, setUserInfo] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  // 获取用户信息
  const fetchUserInfo = useCallback(async () => {
    setIsLoading(true);
    try {
      const response = await userApi.getSelfInfo();
      if (response.code === "200" && response.msg === "success" && response.data) {
        setUserInfo(response.data);
      }
    } catch (error) {
      console.error('获取用户信息失败:', error);
      const storage = localStorage.getItem('authToken') ? localStorage : sessionStorage;
      const cachedUserInfo = storage.getItem('userInfo');
      if (cachedUserInfo) {
        try {
          setUserInfo(JSON.parse(cachedUserInfo));
        } catch (parseError) {
          console.error('解析缓存用户信息失败:', parseError);
        }
      }
    } finally {
      setIsLoading(false);
    }
  }, []);

  useEffect(() => {
    fetchUserInfo();
  }, [fetchUserInfo]);

  // 便捷入口配置
  const quickEntries = [
    {
      id: 'my-file',
      title: '我的文件',
      icon: FileText,
      path: '/storage/source-choice',
      color: 'from-blue-500 to-blue-600',
      bgColor: 'bg-blue-50',
      iconColor: 'text-blue-600'
    },
    {
      id: 'storage-source',
      title: '存储源',
      icon: HardDrive,
      path: '/storage/source',
      color: 'from-purple-500 to-purple-600',
      bgColor: 'bg-purple-50',
      iconColor: 'text-purple-600'
    },
    {
      id: 'profile',
      title: '个人资料',
      icon: User,
      path: '/setting/profile',
      color: 'from-green-500 to-green-600',
      bgColor: 'bg-green-50',
      iconColor: 'text-green-600'
    }
  ];

  const handleEntryClick = (path) => {
    navigate(path);
  };

  return (
    <div className="flex flex-col h-screen overflow-x-hidden">
      {/* 头部工具栏 - 固定 */}
      <div className="flex-shrink-0 mt-3">
        <div className="px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <MenuToggle onClick={toggleSidebar} />
              
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 bg-gradient-to-br from-primary to-primary-600 rounded-xl flex items-center justify-center">
                  <Home className="w-6 h-6 text-white" />
                </div>
                <div>
                  <h1 className="text-2xl font-bold text-material-grey-800">
                    工作台
                  </h1>
                  <p className="text-sm text-material-grey-600">
                    欢迎使用筋斗云
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 主内容区域 - 可滚动 - 增加左右1%的margin */}
      <div className="flex-1 overflow-y-auto overflow-x-hidden px-4 py-6 mx-[1%]">
        {/* 欢迎区域 */}
        <div className="mb-8">
          <div className="text-center mb-6">
            <h2 className="text-4xl font-bold text-material-grey-900 mb-4">
              欢迎来到筋斗云
            </h2>
            <p className="text-lg text-material-grey-600 max-w-3xl mx-auto">
              {isLoading ? '加载中...' : `您好，${userInfo?.nickName || userInfo?.realName || '用户'}！`}
            </p>
          </div>

          {/* 筋斗云介绍 - 修改为上下布局 */}
          <Card className="max-w-4xl mx-auto mb-8 bg-gradient-to-r from-primary/5 to-primary/10 border-primary/20">
            <CardContent className="p-8">
              <div className="flex flex-col items-center text-center space-y-6">
                <div className="w-20 h-20 bg-gradient-to-br from-primary to-primary-600 rounded-2xl flex items-center justify-center shadow-lg">
                  <Home className="w-10 h-10 text-white" />
                </div>
                
                <div className="w-full">
                  <h3 className="text-2xl font-bold text-material-grey-900 mb-3">
                    关于筋斗云
                  </h3>
                  <p className="text-material-grey-700 leading-relaxed mb-4">
                    筋斗云是一款功能强大的智能私有云盘系统，为您提供安全、高效的文件存储和管理解决方案。
                    支持多种存储源配置，让您的数据管理更加灵活便捷。
                  </p>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
                    <div className="flex flex-col items-center space-y-3">
                      <div className="w-10 h-10 bg-white rounded-lg flex items-center justify-center shadow-sm">
                        <FileText className="w-5 h-5 text-primary" />
                      </div>
                      <div>
                        <p className="text-sm font-semibold text-material-grey-900">文件管理</p>
                        <p className="text-xs text-material-grey-600">高效便捷</p>
                      </div>
                    </div>
                    <div className="flex flex-col items-center space-y-3">
                      <div className="w-10 h-10 bg-white rounded-lg flex items-center justify-center shadow-sm">
                        <HardDrive className="w-5 h-5 text-primary" />
                      </div>
                      <div>
                        <p className="text-sm font-semibold text-material-grey-900">多源存储</p>
                        <p className="text-xs text-material-grey-600">灵活配置</p>
                      </div>
                    </div>
                    <div className="flex flex-col items-center space-y-3">
                      <div className="w-10 h-10 bg-white rounded-lg flex items-center justify-center shadow-sm">
                        <User className="w-5 h-5 text-primary" />
                      </div>
                      <div>
                        <p className="text-sm font-semibold text-material-grey-900">安全可靠</p>
                        <p className="text-xs text-material-grey-600">数据保护</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* 便捷入口卡片 - 修改为左侧图标右侧文字的简洁布局 */}
          <Card className="max-w-4xl mx-auto">
            <CardHeader>
              <CardTitle className="flex items-center justify-between">
                <span className="text-xl">便捷入口</span>
                <span className="text-sm font-normal text-material-grey-500">快速访问常用功能</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                {quickEntries.map((entry) => {
                  const IconComponent = entry.icon;
                  return (
                    <button
                      key={entry.id}
                      onClick={() => handleEntryClick(entry.path)}
                      className="group flex items-center space-x-4 p-4 rounded-xl border-2 border-material-grey-200 hover:border-primary/50 transition-all duration-300 hover:shadow-lg bg-white"
                    >
                      <div className={`w-12 h-12 ${entry.bgColor} rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-300`}>
                        <IconComponent className={`w-6 h-6 ${entry.iconColor}`} />
                      </div>
                      <div className="flex-1 text-left">
                        <h4 className="text-base font-bold text-material-grey-900 group-hover:text-primary transition-colors">
                          {entry.title}
                        </h4>
                      </div>
                    </button>
                  );
                })}
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
};

export default Index;

